<template>
	<!--pages/login/login.wxml-->
	<view class="container">
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				欢迎回来！
			</view>
			<view class="input-content">
				<view class="input-item">
					<!-- <text class="tit">手机号码</text> -->
					<input type="text" placeholder="请输入网易邮箱"  
						v-model="email" />
				</view>
				<view class="input-item">
					<!-- <text class="tit">密码</text> -->
					<input type="password" placeholder="请输入密码" 
						 v-model="password" />
				</view>
			</view>
			<button class="confirm-btn" @click="login">登录</button>
			<view class="forget-section">
				忘记密码?
			</view>
		</view>
		<view class="register-section">
			还没有账号?
			<text>马上注册</text>
		</view>
	</view>


</template>

<script>
	import {apiLogin} from '../../apis/index.js'
	export default {
		data() {
			return {
				email: '',
				password: ''
			}
		},
		methods: {
			async login() {
				let { email, password } = this
				        // 手机号验证：1空，2格式不正确， 3正确
				        if(!email) {
				            uni.showToast({
				                title: '邮箱不能为空',
				                icon: 'none',
				                duration: 2000
				            })    
				        }
				        // let phoneReg = /^1[3-9]\d{9}$/
						 let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
				        if(!emailReg.test(email)) {
				            uni.showToast({
				                title: '请输入正确邮箱',
				                icon: 'none',
				                duration: 2000
				            })
				            return  
				        }
				        if(!password) {
				            uni.showToast({
				                title: '密码不能为空',
				                icon: 'none',
				                duration: 2000
				            })
				            return
				        }
				        // 后台验证
				        const result = await apiLogin({email, password, isLogin: true})
						console.log(result)
				        if(result.code === 200) {
				            uni.showToast({
				                title: '登陆成功',
				                icon: 'success',
				                duration: 2000
				            })
				            // 1方式一：本地存储用户信息
				            // uni.setStorageSync('userInfo', JSON.stringify(result.profile))
							// 2方式二：保存vuex
							const profile = result.profile
							this.$store.commit('storeLogin', profile)
				            // 登陆成功跳转个人中心
				            uni.reLaunch({
				              url: '/pages/index/index',
				            })
				        }else {
				            uni.showToast({
				                title: '登陆失败,请重新登录',
				                icon: 'none',
				                duration: 2000
				            })
				        }
			}
		}
	}
</script>

<style>
	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40rpx;
	}

	.left-top-sign {
		font-size: 120rpx;
		color: #f8f8f8;
		position: relative;
		left: -16rpx;
	}

	.welcome {
		position: relative;
		left: 50rpx;
		top: -90rpx;
		font-size: 46rpx;
		color: #555;
	}


	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 20rpx;
		background: #f8f6fc;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 50rpx;

	}

	.input-item:last-child {
		margin-bottom: 0;
	}

	.input-item .tit {
		height: 50rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		color: #606266;
	}

	.input-item input {
		height: 60rpx;
		font-size: 30rpx;
		color: #303133;
		width: 100%;
	}

	.confirm-btn {
		width: 630rpx !important;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 70rpx;
		background: #d43c33;
		color: #fff;
		font-size: 32rpx;
		padding: 0;
	}

	.confirm-btn2:after {
		border-radius: 100px;
	}

	.forget-section {
		font-size: 28rpx;
		color: #4399fc;
		text-align: center;
		margin-top: 40rpx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50rpx;
		width: 100%;
		font-size: 28rpx;
		color: #606266;
		text-align: center;

	}

	.register-section text {
		color: #4399fc;
		margin-left: 10rpx;
	}
</style>
